<template>
  <div>
    <div class="head">
			<AppHeader style="z-index:10"></AppHeader>
			<van-image
				:src="require('@/assets/img/explore-5.3.jpg')"
					style="width: 100%; height: 300px"
				/>
          <h1 >推荐分享</h1>        
			</div>
      
      <!-- 我的分享 -->
      <div class="myShare">
        <h2>创建分享</h2>
        <van-grid>       
            <van-image :src="require('@/assets/img/myshare.webp')" style="width:100%" />   
            <div class="myShares">
              <p>快来创建你的分享，让大家看看你的欢愉之旅</p>
              <van-button @click="$router.push('/my-share')" icon="share-o" color="brown" round style="width:100%;height:60px;font-size: 16px;" >创建我的分享</van-button>
            </div> 
        </van-grid>
      </div>

      <!-- 他人分享 -->
      <div class="otherShare">
        <h1>他人分享</h1>
        <van-tabs v-model="active" background="brown" color="white">
          <van-tab title="全部">
            <OtherShare v-for="item in Postbars" :key="item.id" :ptime="item.ptime" :content="item.content" :img1="item.img1" :img2="item.img2" :nickname="item.nickname" :portrait="item.portrait"></OtherShare>
          </van-tab>
        </van-tabs>
      </div>

      <AppFooter></AppFooter>
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue';
import AppFooter from '@/components/AppFooter.vue';
import OtherShare from '@/components/OtherShare.vue';
import httpApi from "@/http";

export default {
	 components: { AppHeader,AppFooter ,OtherShare},
   data() {
    return {
      active: 0,
      Postbars:[],
    };
  },
    methods: {
      /**发送请求 加载评论列表 */
      listPostbars() {
        let params={user_id:1}
        httpApi.PostbarApi.queryAllPostbars(params).then((res) => {
        console.log("加载评论列表", res);
        this.Postbars = res.data.data;
      });
      }
    },
    //页面挂在完毕后，发送请求，加载评论
  mounted() {
    this.listPostbars(); 
  },
  }
</script>

<style lang="scss" scoped>
.head{
	position: relative;
	h1{
		position: absolute;
		top: 200px; 
    left: 20px;
    color: white;
	}
}
.otherShare{
  background-color: #eee;
  padding: 20px 0;
  height:100%;
  h1{ 
    padding:20px;
  }
}

.OthersShare{
    display: flex;
    flex-direction: row;
    padding-top: 10px;
    padding-left: 20px;
    .personShare_right{
      padding-left: 20px;
      line-height: 35px;
    }
  }
.myShare{
  position: relative;
  padding: 20px;
	h2{
  padding:40px 0px;
  font-size:32px
	}
	.myShares{
  width:400px;
  line-height:30px;
  padding:40px;
	}
}
</style>
<style>
.van-tab--active{
  color:#fff;
}
.van-grid-item__content{
  width:100%;
  flex-direction: row;
}
</style>